<!-- 长来首页展示——h5页面 -->
<template>
  <view class="xfl_Container">
    <!-- #ifdef H5 -->
    <hyDownloadTips v-if="shareCode && !isAlipayClient()" :bottom="'180rpx'" />
    <!-- #endif -->
    <searchBar @on-search="onSearch" />
    <view class="titleList">
      <scroll-view scroll-x class="titleBox">
        <view
          v-for="(category, index) in categoryTitle"
          :key="category.id"
          class="title"
          @click="handleTitle(category, index)"
          :class="{ activeTile: activeTile == index }"
        >
          {{ category.name }}
        </view>
      </scroll-view>
    </view>

    <view class="titleItem">
      <view class="actions">
        <view
          :class="['item', `${item.objectType}`]"
          v-for="item in categoryList"
          :key="item.id"
          @tap="handleClick(item)"
        >
          <image
            class="icon"
            :src="getImgFullPath(item.imageUrl)"
            mode="auto"
          />
          <view style="font-size: 24rpx; color: #9f9f9f">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <u-swiper
      style="margin-top: 40rpx"
      :list="bannerList2"
      height="160"
      mode="none"
      interval="3500"
      duration="1000"
      @click="handleBannerClick($event, bannerList2)"
    >
    </u-swiper>
    <!-- 线上线下 -->
    <view class="twoBox">
      <view>
        <u-image
          style="width: 80%; height: 300rpx"
          src="../../static//clxxsjmd.png"
          mode="heightFix"
          @click="handleGoClshop"
        ></u-image>
        <!-- <view class="top">
          <view class="topTitle">线下商家</view>
          <view class="topImag">买好货</view>
        </view>
        <view class="botton">
          <view v-for="shop in shopList.list" class="bottnItem">
           
            <image
              :src="getImgFullPath(shop.avatar)"
              style="width: 140rpx; height: 150rpx; border-radius: 10rpx"
            />
            <text class="shopName">{{ shop.name }}</text>
          </view>
        </view> -->
      </view>
      <view class="offline">
        <view class="top">
          <view class="topTitle">线上商城</view>
          <view class="topImag">单单实惠</view>
        </view>
        <view class="botton">
          <view
            v-for="shop in productList.list"
            class="bottnItem"
            @click="handleGoRestaurant(shop)"
          >
            <!-- <u-image style="width: 150rpx;height: 160rpx; " :src="getImgFullPath(shop.avatar)"
                            mode="widthFix"></u-image> -->
            <image
              :src="getImgFullPath(shop.image)"
              style="width: 150rpx; height: 150rpx; border-radius: 10rpx"
            />
            <text class="shopName">{{ shop.brandName }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 附近商家 -->
    <view class="card">
      <view class="cardTitle">附近商家</view>
      <!-- 如果分类id是9500034显示大牌-->
      <C_BIGSHOP v-if="CLKJ_XXHD == 9500034" :isApp="isApp" :shopMode="6" />
      <!-- 如果分类id不是9500034显示门店 -->
      <C_SHOP
        v-else-if="CLKJ_XXHD != 9500034"
        :integralsRuleId="props.integralsRuleId"
      />

      <u-back-top :scroll-top="scrollTop"></u-back-top>
      <!-- 增加一些内容来测试滚动 -->
      <!-- <view v-for="i in 50" :key="i" style="height: 100rpx;">
                内容 {{ i }}
            </view> -->
    </view>

    <!-- <hy-tabbar bgColor="#fff"></hy-tabbar> -->
  </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
//#region ************ 引入组件 ********************** */
//搜索
import searchBar from '@/components/hy-search-bar2/index.vue'
//附近
import C_BIGSHOP from './bigShop/c_bigShop.vue'
import C_SHOP from './c_shop.vue'
//#endregion
//#region ************ 工具 ********************** */
//模式工具
import {
  getQueryObject,
  getQueryVariable,
  isAlipayClient,
  isWeChat,
  parseParams
} from '@/utils/common'
import {
  useGoodStore,
  useUserStore,
  useShopInfoStore,
  useGoodsDetailStore,
  useCartStore
} from '@/store'
//图片
import { getImgFullPath } from '@/utils'
//#endregion
//#region ************ 引入api ********************** */
import { baseApi, moneyApi, powerBankApi, productApi } from '@/api'
//#endregion

//props
const props = defineProps({
  integralsRuleId: {
    type: Number,
    default: null
  }
})

//初始数据
const isApp = ref(false) //p判断是否是app进入
const userStore = useUserStore()
const carStore = useCartStore()
const shareCode = ref('')
const activeTile = ref(0)
const categoryTitle = ref<any>([])
const categoryList = ref<any>([])
const bannerList2 = ref([])
const CLKJ_XXHD = ref(1020000)
const advertisingEnum = reactive<any>(baseApi.advertising_enum) //选择的模式传参
// 门店列表
const shopList = reactive({
  pageIndex: 1,
  pageSize: 18,
  list: []
})

//线上商城
const productList = reactive<any>({
  pageIndex: 1,
  pageSize: 18,
  list: []
})
const scrollTop = ref(0)

//#region ************ 搜索 ********************** */
const onSearch = () => {
  uni.navigateTo({
    url: '/pages/physicalShopList/index'
  })
}
const handleGoClshop = () => {
  uni.navigateTo({
    url: '/pages/index/clShopList'
  })
}

//#endregion

//#region ************ 分类 ********************** */
//获取一级分类
const getCategoryList = async () => {
  const { data } = await baseApi.getCategoryList({
    pageIndex: 1,
    pageSize: 20,
    type: props.integralsRuleId,
    detail: true
  })
  categoryTitle.value = data.records
  categoryList.value = categoryTitle.value[activeTile.value].advertisingList
  CLKJ_XXHD.value = categoryTitle.value[activeTile.value].id
}

const handleTitle = (item: any, index: any) => {
  activeTile.value = index
  CLKJ_XXHD.value = categoryTitle.value[index].id
  categoryList.value = categoryTitle.value[index].advertisingList
}

//获取二级分类列表
const getBaseDataFn = async (type: any, callback: (arg0: any) => void) => {
  const { data } = await baseApi.getAdvertisingList({
    pageIndex: 1,
    pageSize: 20,
    type
  })
  callback(data)
}

// 首页加载渲染
const startRendering = async (
  xxhd: any,
  bannerBottom: any,
  bannerTop?: any
) => {
  // 线下好店
  // getBaseDataFn(xxhd, (data) => {
  //     categoryList.value = data.records
  // })
  //banner
  getBaseDataFn(bannerBottom, (data) => {
    const { records } = data
    records.forEach((element: any) => {
      element.image = getImgFullPath(element.imageUrl) || ''
    })
    bannerList2.value = data.records
  })
}

const handleClick = (adv: {
  webUrl: any
  objectType: any
  content: string
  objectFunctionType: number
  type: number
  id: number
  name: string
}) => {
  if (adv.content != '') {
    var brandId = JSON.parse(adv.content).shopBrandId
    var categoryId = JSON.parse(adv.content).categoryId
  }
  //跳转大牌生活
  // console.log(adv, '长来555')
  // adv.type是  9500034是热门，9500034是大牌分类
  if (
    adv.type == 9500034 &&
    (brandId == 1 ||
      brandId == 2 ||
      brandId == 5 ||
      brandId == 10 ||
      brandId == 13 ||
      brandId == 19 ||
      brandId == 21 ||
      brandId == 41 ||
      brandId == 49)
  ) {
    // 本不用写判断brandId,直接跳，但暂时有些大牌未上，需要显示未空
    uni.navigateTo({
      url: `/pages/bigLife/chooseShop?brandId=${brandId}&mode=6`
    })
  }
  // 处理热门里面的大牌跳转
  else if (
    adv.type == 9500033 &&
    (brandId == 10 ||
      brandId == 5 ||
      brandId == 2 ||
      brandId == 19 ||
      brandId == 41 ||
      brandId == 1 ||
      brandId == 13)
  ) {
    uni.navigateTo({
      url: `/pages/bigLife/chooseShop?brandId=${brandId}&mode=6`
    })
  }
  // 处理热门里面的电影院跳转
  else if (adv.type == 9500033 && brandId == 666) {
    uni.navigateTo({
      url: `/packageF/pages/index/index?mode=6`
    })
  }
  // 供应链
  else if (adv.type == 9500033 && categoryId == 210001) {
    uni.navigateTo({
      url: `/packageG/pages/index/index?mode=6`
    })
  } else {
    if (!adv.webUrl) {
      switch (adv.objectType) {
        // case 10:
        //   break
        case 13:
          if (adv.objectFunctionType == 100) {
            toPhysicalStoreList(adv.content)
          } else if (adv.objectFunctionType == 101) {
            toShopDetail(adv.content) //店铺详情
          }
          break
        // case 100:
        //   break
        default:
          uni.navigateTo({
            url: `/pages/physicalShopList/index`
          })
          break
      }
    } else {
      toWebview(adv.webUrl)
    }
  }
}
// else if (
//     adv.type == 9500033 &&
//     (adv.name == '星巴克' ||
//       adv.name == '麦当劳' ||
//       adv.name == '奈雪の茶' ||
//       adv.name == '喜茶' ||
//       adv.name == '库迪咖啡')
//   ) {
//     const brandId = JSON.parse(adv.content).shopBrandId
//     uni.navigateTo({
//       url: `/pages/bigLife/chooseShop?brandId=${brandId}&mode=6`
//     })
//   }

//#endregion
// #region ************************* 跳转工具 *************************/
// 跳转店铺
const toShopDetail = (content: string) => {
  const obj = JSON.parse(content)
  uni.navigateTo({
    url: `/pages/physicalShop/index?shopId=${obj.id}&shopType=${obj.shopType}`
  })
}
// 跳转线下店列表页面
const toPhysicalStoreList = (content: any) => {
  uni.navigateTo({
    url: `/pages/physicalShopList/index?categoryData=${content}`
  })
}
// 跳转webview
const toWebview = (webUrl: string) => {
  const str = webUrl.split('&from=app')[0] //截取app
  const origin = str.split('?')[0] //获取http
  const params = getQueryObject(str) //str获取里面的参数
  const url = parseParams(origin, params)

  uni.navigateTo({
    url: `/pages/webview/index?url=${url}`
  })
}
//#endregion

//#region ************ 轮播图 ********************** */
const handleBannerClick = (i: number, dataList: any[]) => {
  console.log(i, dataList, '轮播图')
  const { objectType, content } = dataList[i]
  console.log(objectType, 'objectType')
  // objectType是设置广告时选择的目标类型，0是默认，13是商店
  if (objectType == 13) {
    if (content) {
      const obj = JSON.parse(content)
      uni.navigateTo({
        url: `/pages/physicalShop/index?shopId=${obj.id}&shopType=${obj.shopType}`
      })
    }
  } else if (objectType == 0) {
    let ppid
    if (content != '') {
      ppid = JSON.parse(content).shopBrandId
    }
    console.log(ppid, 'ppid')
    // 跳转大牌
    if (
      ppid == 1 ||
      ppid == 2 ||
      ppid == 5 ||
      ppid == 10 ||
      ppid == 13 ||
      ppid == 19 ||
      ppid == 21 ||
      ppid == 41 ||
      ppid == 49
    ) {
      uni.navigateTo({
        url: `/pages/bigLife/chooseShop?brandId=${ppid}&mode=6`
      })
    } else if (ppid == 666) {
      // 跳转电影院
      uni.navigateTo({
        url: `/packageF/pages/index/index?mode=6`
      })
    }
  }
}

//#endregion

//#region ************ 线下商家 ********************** */
const getShopList = async () => {
  const { data } = await productApi.getShopList({
    pageIndex: 1,
    pageSize: 2,
    detail: 'true',
    otherColumns: 'moneyRuleDetails,vipReserveRoleCount,coupons',
    shopType: 3,
    integralsRuleId: props.integralsRuleId,
    // categoryId: tab.id,
    distance: 1
  })
  const { records, current, pages } = data
  records.forEach((shop: object) => {})
  shopList.list.push(...records)
  console.log(shopList.list, '列表==》')
}

//#endregion

//#region **************** 获取线上列表 ****************/
const getproductList = async () => {
  const { data } = await productApi.getProductList({
    pageIndex: 1,
    pageSize: 2,
    detail: 'true'
  })
  productList.list = data.records
  console.log('线上列表', data)
}

//线上商城跳转
const handleGoRestaurant = (item: any) => {
  uni.navigateTo({
    url: `/pages/bigLife/chooseShop?brandId=${item.id}&mode=6`
  })
}

//#endregion

//返回顶部
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

//#region ************ 页面生命周期 ********************** */
onLoad(() => {
  //清除单个数据
  sessionStorage.removeItem('wzLocation')
  localStorage.removeItem('wzLocation')
  getCategoryList()
  getShopList()
  userStore.getMemberTotalFulaiquan()
  getproductList()
  startRendering(CLKJ_XXHD.value, advertisingEnum.CLKJ_BANNER1)
})

onShow(() => {
  carStore.clearGoods()
})
//#endregion
</script>

<style lang="scss" scoped>
.xfl_Container {
  padding: 0 20rpx;
  padding-top: 70rpx;
  height: 400rpx;
  background: linear-gradient(
    171deg,
    #feece7 50%,
    rgba(255, 255, 255, 0.5) 100%
  );

  // .titleList {
  //     width: 100%;

  //     overflow: hidden;
  //     // padding: 0 20rpx;
  // }

  // .titleBox {
  //     width: 100%;
  //     display: flex;
  //     overflow-x: auto;
  //     white-space: nowrap;
  //     -webkit-overflow-scrolling: touch;

  //     .title {
  //         position: relative;
  //         width: 220rpx;
  //         height: 50rpx;
  //         text-align: center;
  //         line-height: 50rpx;

  //     }

  //     .activeTile {
  //         color: #fff;
  //         border-radius: 25rpx;
  //         background-color: #ff6b17;

  //         &::after {
  //             content: '';
  //             position: absolute;
  //             bottom: -15rpx;
  //             /* 调整三角形的位置 */
  //             left: 50%;
  //             transform: translateX(-50%);
  //             width: 0;
  //             height: 0;
  //             border-left: 10rpx solid transparent;
  //             border-right: 10rpx solid transparent;
  //             border-top: 15rpx solid #ff6c18;
  //         }
  //     }
  // }
  .titleList {
    width: 100%;
    overflow: hidden;
    // padding: 20rpx 0;
  }

  .titleBox {
    display: flex;
    height: 80rpx;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; // 提升移动端滚动体验

    .title {
      position: relative;
      // width: 120rpx;
      height: 50rpx;
      padding: 0 18rpx;

      text-align: center;
      line-height: 50rpx;
      margin-right: 20rpx; // 标题之间的间距
      flex-shrink: 0; // 防止被压缩

      &.activeTile {
        color: #fff;
        border-radius: 25rpx;
        background-color: #ff6b17;

        // position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          bottom: -15rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 10rpx solid transparent;
          border-right: 10rpx solid transparent;
          border-top: 15rpx solid #ff6c18;
        }
      }
    }
  }

  .titleItem {
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.07);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    // height: 156rpx;
    // width: 100%;
    left: 12rpx;
    top: 180rpx;
    padding: 12rpx 13rpx 12rpx 20rpx;

    .actions {
      // margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;

      .item {
        width: 20%;
        margin-bottom: 20rpx;

        .icon {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }

  .twoBox {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;

    .online {
      width: 48%;
      height: 300rpx;
      padding: 10rpx;
      background: linear-gradient(
        165deg,
        #cdff9f 0%,
        #ffffff 100%,
        #ffffff 100%
      );
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(221, 221, 221, 0.26);
      border-radius: 8rpx;

      .top {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        .topTitle {
          margin: 0 10rpx;
          font-size: 32rpx;
          font-weight: 700;
        }

        .topImag {
          width: 168rpx;
          padding-left: 20rpx;
          height: 45rpx;
          line-height: 45rpx;
          text-align: left;
          font-size: 24rpx;
          color: #43a93f;
          background: url('@/static/xfl/title1.png');
          background-size: cover;
        }
      }

      .botton {
        display: flex;
        height: 230rpx;

        .bottnItem {
          margin-top: 20rpx;
          margin-right: 20rpx;
          width: 48%;
          height: 230rpx;
        }

        .shopName {
          font-size: 24rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          width: 98%;
        }
      }
    }

    .offline {
      width: 49%;
      height: 300rpx;
      background: linear-gradient(126deg, #feccc1 0%, #ffffff 50%),
        linear-gradient(45deg, #feccc1 60%, #ffffff 100%);
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(221, 221, 221, 0.26);
      border-radius: 8rpx;

      .top {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .topTitle {
          margin: 0 10rpx;
          font-size: 32rpx;
          font-weight: 700;
        }

        .topImag {
          width: 186rpx;
          padding-left: 20rpx;
          height: 45rpx;
          line-height: 45rpx;
          text-align: left;
          font-size: 24rpx;
          color: #f27762;
          background: url('@/static/xfl/title0.png');
          background-size: cover;
        }
      }

      .botton {
        display: flex;
        height: 230rpx;

        .bottnItem {
          width: 48%;
          height: 230rpx;
          margin-top: 20rpx;
          // margin-right: 20rpx;
          padding-left: 20rpx;
        }

        .shopName {
          font-size: 24rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          width: 98%;
        }
      }
    }
  }
}

.card {
  width: 100%;
  text-align: left;
  margin-bottom: 50rpx;
  background-color: #fff;
  border-radius: 40rpx;

  .cardTitle {
    padding-top: 20rpx;
    margin: 40rpx 0 0 40rpx;
    width: 120rpx;
    font-weight: 700;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5rpx;
      background: linear-gradient(270deg, #ffd6a3 0%, #ff6c18 100%);
    }
  }
}

:deep(.uni-scroll-view-content) {
  position: relative;
  width: 100%;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
</style>
